<template>
  <div class="detail-box">
    <login-head />
    <div v-show="loginStatus">
      <login-main />
    </div>
    <div v-show="loginStatus && false">
      <login-footer />
    </div>
    <div v-show="!loginStatus">
      <reset-password />
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, ref, toRefs, onUnmounted, watch } from 'vue';
  import LoginHead from '@/views/login/components/login-head.vue';
  import LoginMain from '@/views/login/components/login-main.vue';
  import LoginFooter from '@/views/login/components/login-footer.vue';
  import ResetPassword from '@/views/login/components/reset-password.vue';
  import VueEvent from '@/helper/event';
  import { EVENT_METHOD, CUR_PAGE } from '@/helper/constant';
  export default defineComponent({
    name: 'LoginDetail',
    components: {
      LoginHead,
      LoginMain,
      LoginFooter,
      ResetPassword,
    },
    setup() {
      let loginStatus = ref(true); //当前页面状态
      const state = {
        eventMethod: EVENT_METHOD,
      };
      const methods = {
        switchLoginStatus() {
          //登录状态和忘记密码状态切换
          loginStatus.value = !loginStatus.value;
        },
      };
      watch(
        () => loginStatus.value,
        (val) => {
          val
            ? sessionStorage.setItem(CUR_PAGE.temPage, CUR_PAGE.loginPage)
            : sessionStorage.setItem(CUR_PAGE.temPage, CUR_PAGE.forgetPage);
        },
        { deep: true, immediate: true },
      );
      onMounted(() => {
        VueEvent.on(state.eventMethod.FORGET_PASSWORD, methods.switchLoginStatus);
      });
      onUnmounted(() => {
        VueEvent.off(state.eventMethod.FORGET_PASSWORD);
        sessionStorage.removeItem(CUR_PAGE.temPage);
      });

      return {
        loginStatus,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .detail-box {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
